<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { listMedicine } from '@/api/medicine'
import { listUser } from '@/api/user'
import { listOrder } from '@/api/order'
import { listStock } from '@/api/stock'

const userStore = useUserStore()

// 统计数据
const statisticsData = ref({
  medicineCount: 0,
  userCount: 0,
  orderCount: 0,
  lowStockCount: 0
})

// 药品库存预警阈值
const LOW_STOCK_THRESHOLD = 10

// 加载中状态
const loading = ref(true)

// 获取统计数据
const getStatisticsData = async () => {
  try {
    // 获取药品列表
    const medicineList = await listMedicine()
    statisticsData.value.medicineCount = medicineList.length

    // 获取用户列表
    const userList = await listUser()
    statisticsData.value.userCount = userList.length

    // 获取订单列表
    const orderList = await listOrder()
    statisticsData.value.orderCount = orderList.length

    // 获取库存列表
    const stockList = await listStock()
    statisticsData.value.lowStockCount = stockList.filter(item => item.quantity < LOW_STOCK_THRESHOLD).length
  } catch (error) {
    console.error('获取统计数据失败', error)
  } finally {
    loading.value = false
  }
}

// 欢迎语
const getWelcomeMessage = () => {
  const hour = new Date().getHours()
  if (hour < 6) return '凌晨好'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 17) return '下午好'
  if (hour < 19) return '傍晚好'
  if (hour < 22) return '晚上好'
  return '夜深了'
}

onMounted(() => {
  getStatisticsData()
})
</script>

<template>
  <div class="dashboard-container">
    <!-- 欢迎信息 -->
    <div class="welcome-section">
      <div class="welcome-info">
        <h2>{{ getWelcomeMessage() }}，{{ userStore.userName }}</h2>
        <p>欢迎使用连锁药房管理系统</p>
      </div>
      <img src="https://img.icons8.com/color/240/000000/pharmacy-shop.png" alt="Welcome" class="welcome-image" />
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics-cards">
      <el-col :span="6">
        <el-card shadow="hover" class="statistic-card">
          <template #header>
            <div class="card-header">
              <el-icon><FirstAidKit /></el-icon>
              <span>药品总数</span>
            </div>
          </template>
          <div v-loading="loading" class="card-content">
            <div class="statistic-value">{{ statisticsData.medicineCount }}</div>
            <div class="statistic-label">种药品</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="statistic-card">
          <template #header>
            <div class="card-header">
              <el-icon><User /></el-icon>
              <span>用户总数</span>
            </div>
          </template>
          <div v-loading="loading" class="card-content">
            <div class="statistic-value">{{ statisticsData.userCount }}</div>
            <div class="statistic-label">位用户</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="statistic-card">
          <template #header>
            <div class="card-header">
              <el-icon><List /></el-icon>
              <span>订单总数</span>
            </div>
          </template>
          <div v-loading="loading" class="card-content">
            <div class="statistic-value">{{ statisticsData.orderCount }}</div>
            <div class="statistic-label">个订单</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="statistic-card warning">
          <template #header>
            <div class="card-header">
              <el-icon><Warning /></el-icon>
              <span>库存预警</span>
            </div>
          </template>
          <div v-loading="loading" class="card-content">
            <div class="statistic-value">{{ statisticsData.lowStockCount }}</div>
            <div class="statistic-label">种药品库存不足</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统信息 -->
    <el-card class="system-info" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon><InfoFilled /></el-icon>
          <span>系统信息</span>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="系统名称">连锁药房管理系统</el-descriptions-item>
        <el-descriptions-item label="当前版本">v1.0.0</el-descriptions-item>
        <el-descriptions-item label="前端框架">Vue 3 + Vite + Element Plus</el-descriptions-item>
        <el-descriptions-item label="登录账号">{{ userStore.userName }}</el-descriptions-item>
        <el-descriptions-item label="用户角色">{{ userStore.userRole === 'employee' ? '员工' : '用户' }}</el-descriptions-item>
        <el-descriptions-item label="登录时间">{{ new Date().toLocaleString() }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
  color: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
}

.welcome-info h2 {
  font-size: 28px;
  margin: 0;
}

.welcome-info p {
  font-size: 16px;
  opacity: 0.8;
  margin-top: 10px;
}

.welcome-image {
  width: 120px;
  height: 120px;
}

.statistics-cards {
  margin-bottom: 20px;
}

.statistic-card {
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
}

.card-header .el-icon {
  margin-right: 10px;
  font-size: 18px;
}

.card-content {
  text-align: center;
  padding: 20px 0;
  min-height: 80px;
}

.statistic-value {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
}

.warning .statistic-value {
  color: #F56C6C;
}

.statistic-label {
  margin-top: 10px;
  color: #606266;
}

.system-info {
  margin-top: 20px;
}
</style> 